<template>
    <div>
        <div class="shadowB" style="position: fixed;left: 0;top: 0;width: 100%;z-index: 999;background: #fff;">
            <nav class="top_bar_box row centerauto flexbox spacebetween">
                <div class="left_box flexbox spacebetween">
                    <router-link to="/userindex" class="logo_box"><img src="../../assets/images/LOGO.jpg" /></router-link>
                    <ul class="bar_list clearfix" v-show="changeNav == 1">
                        <li>
                            <router-link to="/projectslist" class="line">项目大厅</router-link>
                        </li>
                        <li>
                            <router-link to="/developerindex" class="line">成为开发者</router-link>
                        </li>
                        <li>
                            <router-link to="/codelist" class="line">源码中心</router-link>
                        </li>
                        <li>
                            <router-link to="/help" class="line">帮助</router-link>
                        </li>
                    </ul>
                    <ul class="bar_list clearfix" v-show="changeNav == 2">
                        <li>
                            <router-link to="/help" class="line">常见问题</router-link>
                        </li>
                        <li>
                            <router-link to="/rules" class="line">规则协议</router-link>
                        </li>
                        <li>
                            <router-link to="/userfeedback" class="line">用户反馈</router-link>
                        </li>
                    </ul>
                </div>
                <ul class="right_list clearfix">
                    <li v-show="!isLogin">
                        <router-link to="/login" class="line">登录</router-link>
                    </li>
                    <li v-show="!isLogin">
                        <router-link to="/register" class="line">注册</router-link>
                    </li>
                    <li v-show="isLogin">
                        <router-link to="/senditem" class="line"><img :src="worksrc" width="24" height="24" class="nav_icon" title="工作台" @mouseout="workout" @mouseover="workover" /></router-link>
                    </li>
                    <li v-show="isLogin">
                        <router-link to="/integral" class="line"><img :src="qiansrc" width="24" height="24" class="nav_icon" title="签到" @mouseout="qianout" @mouseover="qianover" /></router-link>
                    </li>
                    <li v-show="isLogin">
                        <router-link to="/dashboard" class="line"><img :src="moneysrc" width="24" height="24" class="nav_icon" title="vip" style="background: #fff;border-radius: 50%;padding: 1px;" /></router-link>
                    </li>
                    <li v-show="isLogin">
                        <router-link to="/notification" class="line"><img :src="newsrc" width="24" height="24" class="nav_icon" title="消息" @mouseout="newout" @mouseover="newover" /></router-link>
                    </li>
                    <li v-show="isLogin" style="margin-left: 10px;">
                        <el-dropdown @command="handleCommand">
                            <span class="el-dropdown-link">
                                <router-link :to="perpath" class="line">
                                    <img :src="userphoto" width="42" height="42" class="userphoto displayB" />
                                </router-link>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="signout">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </li>
                </ul>
            </nav>
        </div>
        <router-view>
            
        </router-view>
        <!-- 底部 -->
        <footer class="bg-black colorWhite">
            <div class="row centerauto">
                <el-row style="padding: 10px 0;">
                    <el-col :span="18">
                        <ul class="menu_ul clearfix">
                            <li class="menu_text">我是雇主</li>
                            <li>
                                <router-link to="/publishtype">发布需求</router-link>
                            </li>
                            <li>
                                <router-link to="/help">发包宝典</router-link>
                            </li>
                            <li>
                                <router-link to="/help">发包须知</router-link>
                            </li>
                        </ul>
                        <ul class="menu_ul clearfix">
                            <li class="menu_text">我是技术</li>
                            <li>
                                <router-link to="/developerindex">成为开发者</router-link>
                            </li>
                            <li>
                                <router-link to="/help">接包宝典</router-link>
                            </li>
                            <li>
                                <router-link to="/help">接包须知</router-link>
                            </li>
                        </ul>
                        <ul class="menu_ul clearfix">
                            <li class="menu_text">帮助中心</li>
                            <li>
                                <router-link to="/help">新手指南</router-link>
                            </li>
                            <li>
                                <router-link to="/help">常见问题</router-link>
                            </li>
                            <li>
                                <router-link to="/rules">规则中心</router-link>
                            </li>
                            <li>
                                <router-link to="/userfeedback">意见建议反馈</router-link>
                            </li>
                        </ul>
                    </el-col>
                    <el-col :span="6">
                        <ul class="menu_ul text-right">
                            <li>
                                <span class="font-26 bolds">{{systemInfo.s_phone}}</span>
                            </li>
                            <li class="opacity-set">
                                {{systemInfo.s_work_shift}}
                            </li>
                            <li class="paddingtb">
                                官方接包QQ群：<span class="font-16 bolds">{{systemInfo.s_qq_group}}</span>
                            </li>
                        </ul>
                    </el-col>
                </el-row>
                <p class="line_t copyright text-center">Copyright©2019 WD外包平台</p>
            </div>
        </footer>

        <!-- 右侧悬浮 -->
        <div class="r_side_bar">
            <div class="side-bar__content">
                <div class="r_item">
                    <router-link to="/housekeeper" class="tool_tip">项目管家</router-link>
                    <img src="../../assets/images/r_user.png" width="30" />
                </div>
                <div class="r_item">
                    <el-dropdown placement="left-end">
                        <span class="el-dropdown-link">
                            <img src="../../assets/images/r_wx.png" alt="" width="34" style="margin-top: 8px;" />
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <img :src="systemInfo.s_photo" alt="" width="130" height="130" />
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="r_item">
                    <el-dropdown placement="left-end">
                        <span class="el-dropdown-link">
                            <img src="../../assets/images/r_qq.png" alt="" width="34" style="margin-top: 8px;" />
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <img :src="systemInfo.s_qq_photo" alt="" width="130" height="130" />
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="r_item">
                    <router-link to="/userfeedback" class="tool_tip">意见反馈</router-link>
                    <img src="../../assets/images/r_yjfk.png" width="30" />
                </div>
                <div class="r_item" style="margin-top: 20px;" v-show="scrollTop > 300" @click="goTop">
                    <router-link to="" class="tool_tip">返回顶部</router-link>
                    <img src="../../assets/images/r_totop.png" width="30" />
                </div>
            </div>
            <div class="item_back_top">
                
            </div>
        </div>
    </div>
</template>
<script>
    
    import '../../assets/css/main.css'
    export default {
        data(){
            return{
                isLogin: false,
                newsrc: require('../../assets/images/news_black.png'),
                moneysrc: require('../../assets/images/VIPs.png'),
                userphoto: require('../../assets/images/userPic.png'),  //用户信息
                qiansrc: require('../../assets/images/qian_black.png'),  //签到
                worksrc: require('../../assets/images/work_icon.png'),  //工作台
                changeNav: 1,  //更换nav   1为项目  2为帮助中心
                perpath: '',
                systemInfo: {},  //客服信息
                scrollTop: 0,  //与页面顶部的距离
            }
        },
        methods: {
            init(){
                //判断是否登录
                if(window.localStorage.uid){
                    this.isLogin = true;
                }else{
                    this.isLogin = false;
                }

                //判断头部nav
                if((this.$route.path == '/help') || (this.$route.path == '/rules') || (this.$route.path == '/userfeedback')){
                    this.changeNav = 2;
                }else {
                    this.changeNav = 1;
                }

                var _this = this;
                //用户信息
                this.$httpGet('/api/index/Personal_center/enterpriseInfo',{'u_id': window.localStorage.uid}).then(response => {

                    if(response.code == 200){
                        
                        
                        if(response.msg.u_type == 1){
                            _this.perpath = '/personalinfo';
                        }else if(response.msg.u_type == 2){
                            _this.perpath = '/company';
                        }
                        if(response.msg.u_head_portrait){
                            _this.userphoto = response.msg.yuming + response.msg.u_head_portrait;
                        }
                        
                    }

                });

                //客服信息
                this.$httpGet('/api/index/System/getSystemInfo').then(response => {

                    if(response.code == 200){
                        
                        _this.systemInfo = response.msg;
                        
                    }

                });
            },
            //消息  悬停
            newover(){
                this.newsrc = require('../../assets/images/news_active.png');
            },
            //消息  移出
            newout(){
                this.newsrc = require('../../assets/images/news_black.png');
            },
            //资金  悬停
            moneyover(){
                this.moneysrc = require('../../assets/images/VIPs.png');
            },
            //资金  移出
            moneyout(){
                this.moneysrc = require('../../assets/images/VIPs.png');
            },
            //
            qianover(){
                this.qiansrc = require('../../assets/images/qian_a.png');
            },
            //
            qianout(){
                this.qiansrc = require('../../assets/images/qian_black.png');
            },
            //
            workover(){
                this.worksrc = require('../../assets/images/work_active.png');
            },
            //
            workout(){
                this.worksrc = require('../../assets/images/work_icon.png');
            },
            //退出登录
            handleCommand(command){
                console.log(command);
                if(command === 'signout'){
                    window.localStorage.clear();
                    this.$router.push({path: '/login'})
                }
                
            },
            //监听当前与顶部的距离
            scrollToTop() { 
            　　this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            　　
            },
            //返回顶部
            goTop(){
                
                var time = setInterval(function(){
                    if(document.documentElement.scrollTop == 0){
                        clearInterval(time);
                    }else{
                        document.body.scrollTop = document.body.scrollTop - 25;
                        document.documentElement.scrollTop = document.documentElement.scrollTop - 25;
                    }
                    
                },4);

            },
        },
        mounted(){
            this.init();
            window.addEventListener('scroll', this.scrollToTop);
        },
        destroyed () {
            window.removeEventListener('scroll', this.scrollToTop); 
        },
        watch: {
            $route(to, from) {
                if((this.$route.path == '/help') || (this.$route.path == '/rules') || (this.$route.path == '/userfeedback')){
                    this.changeNav = 2;
                }else {
                    this.changeNav = 1;
                }
            }
        },      
    }
</script>
<style scoped>
    .nav_icon{
        vertical-align:middle;
        display: inline-block;
        margin-top: -3px;
    }
    .userphoto{
        border-radius: 50%;
    }
    .r_side_bar{
        position: fixed;
        bottom: 200px;
        right: 20px;
        z-index: 999;
    }
    .r_item{
        width: 55px;
        height: 55px;
        text-align: center;
        background: hsla(0,0%,100%,.9);
        -webkit-box-shadow: 0 0 0 0 #ccc;
        box-shadow: 0 0 0 0 #ccc;
        border: 1px solid #e6e6e6;
    }
    .r_item:hover{
        background: #669fdd;
    }
    .r_item:hover>a{
        display: block;
    }
    .r_item>a{
        color: #fff;
        letter-spacing: 2px;
        padding: 7px 3px;
        display: none;
    }
    .r_item>img{
        margin-top: 15px;
    }
    .r_item:hover>img{
        display: none;
    }
</style>
